<template>
  <div>
    <van-popup v-model:show="dialogVisible">
      <div class="title">预约须知</div>
      <div class="xuzhi-content" v-html="noticeReservation"></div>
      <div class="tc-btm">
        <input
          type="button"
          :value="countDownTxt"
          :class="{ btn_act: countDown <= 0 }"
          @click="onClose"
        />
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useOrderStore } from "@/stores/order";

const dialogVisible = ref(false);
const noticeReservation = computed(() => {
  return useOrderStore().noticeReservation;
});
const countDown = ref(5);
const timer = ref<any>(null);

const showDialog = () => {
  dialogVisible.value = true;
};

const countDownTxt = computed(() => {
  if (countDown.value <= 0) {
    return "我已阅读并同意";
  } else {
    return `请您仔细阅读声明（倒计时${countDown.value}S）`;
  }
});

watch(dialogVisible, () => {
  if (dialogVisible.value == true) {
    countDown.value = 5;
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
    timer.value = setInterval(() => {
      countDown.value--;
      if (countDown.value < 0) {
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  } else {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }
});

const onClose = () => {
  dialogVisible.value = false;
};

defineExpose({ showDialog });
</script>

<style lang="scss" scoped>
.title {
  width: 180px;
  height: 32px;
  margin: 23px auto 15px;
  background: var(--base-color);
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-weight: 600;
  font-size: 20px;
  border-radius: 22px;
}

.xuzhi-content {
  padding: 0 10px;
  max-height: 360px;
  overflow-y: auto;
  color: #333;
  font-size: 14px;
  line-height: 24px;
}

.tc-btm {
  overflow: hidden;
  margin: 30px 20px;

  input[type="button"] {
    min-width: 120px;
    height: 40px;
    background: var(--base-color);
    border-radius: 4px;
    border: 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    float: right;
    opacity: 0.4;
    padding: 0 10px;
    pointer-events: none;

    &.btn_act {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
</style>
